<template>
    <div class="table">
<!--        <div class="crumbs">-->
<!--            <el-breadcrumb separator="/">-->
<!--                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 设备类型管理</el-breadcrumb-item>-->
<!--            </el-breadcrumb>-->
<!--        </div>-->
        <div class="container">
<!--            <div>-->
<!--                <div class="div-line">设备基础类型</div>-->
<!--                <div class="handle-box">-->
<!--                    <el-button type="primary" @click="addCount">新增</el-button>-->
<!--                    <el-button type="success" @click="editCount">修改</el-button>-->
<!--                    <el-button type="danger" @click="delCount">删除</el-button>-->
<!--                </div>-->
<!--                <el-table :data="tableData"  style="width: 100%"-->
<!--                          height="250" border stripe class="table" @selection-change="handleSelectionChange" ref="multipleTable" @row-click="handleRowClick">-->
<!--                    <el-table-column type="selection" width="55" align="center"></el-table-column>-->
<!--                    <el-table-column prop="account" align="center" label="编号">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column prop="name" align="center" label="名称">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column prop="roleName" align="center" label="控制类型">-->
<!--                    </el-table-column>-->
<!--                </el-table>-->

<!--            </div>-->
            <div>
                <div class="div-line" style="margin-top: 15px;">设备协议类型</div>
                <div class="handle-box">
                    <el-button type="primary" @click="addCount">新增</el-button>
                    <el-button type="success" @click="editCount">修改</el-button>
                    <el-button type="danger" @click="delCount">删除</el-button>
                </div>
                <el-table :data="tableData"  style="width: 100%"
                          border stripe class="table" @selection-change="handleSelectionChange" ref="multipleTable" @row-click="handleRowClick">
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column prop="typeName" align="center" label="名称">
                    </el-table-column>
                    <!--<el-table-column prop="canChangeStatus" :formatter="formatterTable" align="center" label="可以控制运行状态">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="canWarning" :formatter="formatterTable" align="center" label="可以配置告警参数">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="canPowerLimit" :formatter="formatterTable" align="center" label="可以配置功率限制">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="canReadDirection" :formatter="formatterTable" align="center" label="可以读取表向">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="canReadData" :formatter="formatterTable" align="center" label="可以读取数据">-->
                    <!--</el-table-column>-->
<!--                    <el-table-column prop="canReadStatus" :formatter="formatterTable" align="center" label="可以读取扩展状态">-->
<!--                    </el-table-column>-->
                    <!--<el-table-column prop="canReadStatus" :formatter="formatterTable" align="center" label="数据读取方式类型">-->
                    <!--</el-table-column>-->
                    <el-table-column prop="remark" align="center" label="备注">
                    </el-table-column>
                </el-table>

            </div>
<!--            <div style="border:1px solid #EBEEF5;padding: 10px;margin-top: 15px;">-->
<!--                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">-->
<!--                    <el-tab-pane label="控制参数" name="first">-->
<!--                    </el-tab-pane>-->
<!--                    <el-tab-pane label="状态分析参数" name="second"></el-tab-pane>-->
<!--                    <el-tab-pane label="数据分析参数" name="third"></el-tab-pane>-->
<!--                    <el-tab-pane label="扩展状态配置参数" name="fourth"></el-tab-pane>-->
<!--                </el-tabs>-->
<!--                <v-equiment></v-equiment>-->
<!--            </div>-->

        </div>
<!--        新增设备类型-->
        <el-dialog :title="diologTitle" :visible.sync="addVisible" width="70%" @open="show" @close="closeDialog" @opened="openedDialog">
                        <div style="">
                            <el-tabs v-model="tabIndexActive" type="card" @tab-click="handleClick" :before-leave="beforeLeave">
                                <el-tab-pane label="基础配置" name="first"></el-tab-pane>
                                <el-tab-pane label="功能配置" name="second"></el-tab-pane>
                                <el-tab-pane label="数据配置" name="third"></el-tab-pane>
                                <el-tab-pane label="设备状态" name="fourth"></el-tab-pane>
                                <!--<el-tab-pane label="modbus" name="five"></el-tab-pane>-->
<!--                                <el-tab-pane label="表向配置" name="six"></el-tab-pane>-->
<!--                                <el-tab-pane label="状态配置" name="seven"></el-tab-pane>-->
                            </el-tabs>
                            <v-equiment  ref="childData" :parentData="parentData" :tabIndexActive="tabIndexActive" :isEditInfo="isEditInfo" :isShowDialog="isShowDialog"></v-equiment>
                        </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit('form')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import { getDeviceType,updateDeviceType,delCountManger ,addDeviceType,getDeviceTypeInfo,deleteDeviceType} from '../../../api/index';
    import vEquiment from './Equiment.vue';
    export default {
        name: "EquipmentType",
        data() {
            return {
                tableData: [],
                roleData:[],
                cur_page: 1,
                page_size:10,
                page_total:1,
                multipleSelection: [],
                diologTitle:'新增设备协议类型',
                styleSelection:[],
                delVisible: false,
                addVisible:false,
                tabIndexActive:'first',
                isEditInfo:false,
                isNextTab:false,
                parentData:{
                },
                isShowDialog:false
            }
        },
        components:{
            vEquiment
        },
        created() {
            this.getData();
        },
        computed: {

        },

        methods: {
            formatterTable(row, column, cellValue, index){
                if(cellValue){
                    return 'true'
                }else{
                    return 'false'
                }
            },
            beforeLeave(activeName,oldActiveName){
                console.log(activeName)
                if(activeName!='first'){
                    var baseInfo = this.$refs.childData.baseForm;
                    console.log(baseInfo)

                    return this.formValidate(baseInfo);
                }
                this.isNextTab = true;
            },
            handleClick(tab, event) {
                console.log(tab.name);
                if(this.isNextTab){
                    this.tabIndexActive = tab.name;
                }


            },
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.getData();
            },


            // 获取数据
            getData() {
                getDeviceType({
                    pageNum:this.cur_page,
                    pageSize:this.page_size
                }).then((res) => {
                    console.log(res)
                    this.tableData = res.datas;
                    // this.page_total = res.total;
                    // console.log(JSON.stringify(this.tableData))
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            //点击行触发，选中或不选中复选框
            handleRowClick(row, column, event){
                this.$refs.multipleTable.toggleRowSelection(row);
            },

            // 保存编辑
            saveEdit(formName) {
                console.log(this.$refs.childData.baseForm)
                console.log(this.$refs.childData.controlForm)
                console.log(this.$refs.childData.statusDevice)
                console.log(this.$refs.childData.deviceData)
                console.log(this.$refs.childData.busData)

                if(this.formValidate(this.$refs.childData.baseForm)){
                    console.log(1)
                    //如果是编辑的话
                    if(this.isEditInfo){
                        console.log(this.multipleSelection)
                        if(this.multipleSelection.length<1){
                            this.$message.error('请选择一种设备类型');
                            return;
                        }
                        if(this.multipleSelection.length>1){
                            this.$message.error(`每次只能修改一种设备类型`);
                            return;
                        }
                        // this.multipleSelection[0].roleValue = this.styleSelection.length>0?this.styleSelection[0].bitValue:'';
                        // this.multipleSelection[0].roleName = this.styleSelection[0].roleName
                        var editDeviceData = {
                            deviceType:this.$refs.childData.baseForm,
                            deviceFunction:this.$refs.childData.controlForm,
                            deviceData:this.$refs.childData.deviceData,
                            deviceState:this.$refs.childData.statusDevice,
                            // busData:this.$refs.childData.busData
                        }
                        updateDeviceType(editDeviceData).then((res)=>{
                            if(res.success){
                                this.$message.success(res.message);
                                this.addVisible = false;
                                this.getData();
                            }else{
                                this.$message.error(res.message)
                            }
                        })
                        return;
                    }
                    //否则为新增
                    var deviceData = {
                        deviceType:this.$refs.childData.baseForm,
                        deviceFunction:this.$refs.childData.controlForm,
                        deviceData:this.$refs.childData.deviceData,
                        deviceState:this.$refs.childData.statusDevice,
                        // busData:this.$refs.childData.busData
                    }
                    console.log(2,deviceData)
                    addDeviceType(deviceData).then((res)=>{
                        console.log(res)
                        if(res.success){
                            this.$message.success(res.message);
                            this.addVisible = false;
                            this.getData();
                        }else{
                            this.$message.error(res.message)
                        }
                    })

                }
            },
            // 确定删除
            deleteRow(){
                var delCountId = new Array();
                for(var i=0;i<this.multipleSelection.length;i++){
                    delCountId.push(this.multipleSelection[i].id)
                }
                console.log(delCountId);
                delCountManger({
                    ids:delCountId
                }).then((res)=>{
                    console.log(res)
                    if(res.success){
                        this.$message.success('删除成功');
                        this.delVisible = false;
                        this.getData();
                    }else{
                        this.$message.error(res.message)
                    }
                })

            },
            //点击新增
            addCount(){
                this.addVisible = true;
                this.isEditInfo = false;
                this.tabIndexActive = "first";
                this.diologTitle = '新增设备协议类型';
                this.parentData = {};
            },

            //点击修改
            editCount(){
                if(this.multipleSelection.length < 1){
                    this.$message.error('请选择需要修改的设备');
                }else
                if(this.multipleSelection.length == 1){
                    this. getDeviceTypeInfo(this.multipleSelection[0].typeId)
                    this.diologTitle = '修改设备协议类型';
                    this.addVisible = true;
                    this.isEditInfo = true;
                    this.form = this.multipleSelection[0];
                }else{
                    this.$message.error('一次只能修改一个设备');
                }



            },
            show () {
                this.isShowDialog = false;
            },
            closeDialog(){
                this.isShowDialog = false;
            },
            openedDialog(){
                this.isShowDialog = true;
            },
            //点击删除
            delCount(){
                if(this.multipleSelection.length <= 0){
                    this.$message.error('请选择需要删除的设备');
                }
                else if(this.multipleSelection.length == 1){
                    deleteDeviceType({
                        id:this.multipleSelection[0].typeId
                    }).then((res)=>{
                        if(res.success){
                            this.getData();
                            this.$message.success(res.message)
                        }else{
                            this.$message.error(res.message)
                        }

                    })
                }else{
                    this.$message.error('一次只能删除一项');
                }

            },

            //修改时获取设备的信息
            getDeviceTypeInfo(tId){
                getDeviceTypeInfo({
                    typeId:tId
                }).then((res)=>{
                    console.log(res)
                    this.parentData = res.expandData
                })
            },
            //必填字段校验
            formValidate(formname) {
                // if(formname.typeName&&formname.readDataMethod&&formname.imageUrl&&formname.imageOfflineUrl&&formname.imageAlarmUrl)
                if(formname.typeName&&formname.readDataMethod){
                    this.isNextTab = true;
                    return true
                }
                if(!formname.typeName){
                    this.$message.error('请填写设备类型名称');
                    this.isNextTab = false;
                    return false;
                }
                if(!formname.readDataMethod){
                    this.$message.error('请选择读取方式');
                    this.isNextTab = false;
                    return false;
                }
                // if(!formname.imageUrl){
                //     this.$message.error('请选择设备型号图片');
                //     this.isNextTab = false;
                //     return false;
                // }
                // if(!formname.imageOfflineUrl){
                //     this.$message.error('请选择离线图片');
                //     this.isNextTab = false;
                //     return false;
                // }
                // if(!formname.imageAlarmUrl){
                //     this.$message.error('请选择告警图片');
                //     this.isNextTab = false;
                //     return false;
                // }
            }
        }
    }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
    .limit-width{
        width: 30%;
        float: left;
        margin:0 10% 10px;

    }
    .el-form-item::after, .el-form-item::before {
        clear: both;
    }

    .div-line{
        padding-bottom: 15px;
        margin-bottom: 15px;
        border-bottom: 1px solid #EBEEF5;
        font-size: 16px;
    }
</style>
